import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { loanRecordAction } from './index';
import { Icon, Popconfirm } from 'antd';
import { CommonTable } from 'components';
import SearchList from './SearchList/SearchList';
import moment from 'moment';
import styles from './LoanRecord.less';
import { DetailModal } from '../RepeatLoan';

const convertParams = (obj = {}) => {
    const { time = [], orderNo = '', userName = '', phoneNo = '', status = '', payTradeNo = '' } = obj;
    const isArr = Array.isArray(time) && time.length > 0;
    return {
        startTime: isArr ? time[0].format('YYYY-MM-DD 00:00:00') : '',
        endTime: isArr ? time[1].format('YYYY-MM-DD 23:59:59') : '',
        orderNo,
        phoneNo,
        payTradeNo,
        userName,
        status
    };
}


const payStatus = {
    0: '放款中',
    1: '放款成功',
    3: '疑似重复订单',
    4: '放款失败',
    5: '待确认订单'
};


class LoanRecord extends Component{

    constructor(props) {
        console.log(props)
        super(props);
        this.state = {};
        this.pageSize = 10;
        this.searchParams = convertParams();
        const _this = this;
        this.columns = [
            { title: '发起时间', dataIndex: 'addTime', key: 'addTime', 
                render(text) {
                    if (text === 0) {
                        return '无'
                    } else {
                        return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
                    }
                }
            },
            { title: 'payTradeNo', dataIndex: 'payTradeNo', key: 'payTradeNo' },
            {
                title: '放款时间',
                dataIndex: 'loanTime',
                key: 'loanTime',
                render(text) {
                    if (text === 0) {
                        return '无'
                    } else {
                        return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
                    }
                }
            },
            { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
            { title: '姓名', dataIndex: 'userName', key: 'userName' },
            { title: '手机号', dataIndex: 'userPhone', key: 'userPhone' },
            {
                title: '支付状态',
                dataIndex: 'loanState',
                key: 'loanState',
                render(text) {
                    return payStatus[text];
                }
            },
            {
                title: '支付金额',
                dataIndex: 'deviceMoney',
                key: 'deviceMoney',
                render(text,record) {
                    const { breakMoney } = record;
                    const money = Number(text) - Number(breakMoney);
                    return Number.isInteger(money) ? money : money.toFixed(2);
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                width: '80px',
                render(text, record) {
                    const { loanState } = record;
                    let ele = (
                        <Popconfirm title={'确认要手动进行放款吗？'} onConfirm={() => _this.loanMoney(text)}>
                            <span><Icon type={'pay-circle-o'}/></span>
                        </Popconfirm>
                    );
                    if(Number(loanState) !== 3) {
                        ele = null;
                    }
                    return (
                        <div className={styles.btnWrapper}>
                            <span onClick={() =>_this.lookDetail(record)}><Icon type={'file'}/></span>
                            {ele}
                        </div>
                    );
                }
            }
        ];
    }

    loanMoney = (text) => {
        const { payMoney, getTableData, tableData: {  pagination } } = this.props;

        payMoney({ id: text }, () => {
            getTableData({ pageSize: this.pageSize, pageNum: pagination['current'], ...this.searchParams });
        })
    }

    handlePageChange = (info) => {
        const { current, pageSize } = info;
        const { getTableData } = this.props;
        getTableData({ pageSize, pageNum: current, ...this.searchParams });
    }

    handleSearch = (obj) => {
        const params = convertParams(obj);
        this.searchParams = params;
        const { getTableData } = this.props;
        getTableData({ ...params, pageSize: this.pageSize, pageNum: 1 });
    }


    lookDetail = (record) => {
        const { orderNo } = record;
        const { changeModalVisible, getModalData } = this.props;
        changeModalVisible(true);
        getModalData({ orderNo });
    }
    afterClose = () => {
        const { setModalData, changeModalLoading } = this.props;
        setModalData({ data: [], pagination: {} });
        changeModalLoading(false);
    }
    handleModalPageChange = (info) => {
        const { current, pageSize } = info;
        const { getModalData } = this.props;
        getModalData({ pageSize, pageNum: current });
    }
    handleModalCancel = () => {
        const { changeModalVisible } = this.props;
        changeModalVisible(false);
    }

    componentDidMount() {
        const { getTableData } = this.props;
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
    }

    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData({ data: [], pagination: {} });
    }

    render() {
        const { tableData: { data, pagination }, loading, modalLoading, modalData, visible } = this.props;
        return (
            <div>
                <SearchList submit={this.handleSearch}/>
                <CommonTable
                    dataSource={data}
                    pagination={pagination}
                    loading={loading}
                    handlePageChange={this.handlePageChange}
                    columns={this.columns}
                />
                <DetailModal
                    modalLoading={modalLoading}
                    visible={visible}
                    afterClose={this.afterClose}
                    modalData={modalData}
                    handleCancel={this.handleModalCancel}
                    handlePageChange={this.handleModalPageChange}
                />
            </div>
        );

    }
}

const mapStateToProps = (state) => {
    const { paymentManageState: { loanRecordState } } = state;
    return {
        tableData: loanRecordState['tableData'],
        loading: loanRecordState['loading'],
        visible: loanRecordState['visible'],
        modalData: loanRecordState['modalData'],
        modalLoading: loanRecordState['modalLoading']
    };
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: loanRecordAction.lrdGetTableData,
        setTableData: loanRecordAction.lrdSetTableData,
        payMoney: loanRecordAction.lrdPayMoney,
        getModalData: loanRecordAction.lrdGetModalData,
        setModalData: loanRecordAction.lrdSetModalData,
        changeModalVisible: loanRecordAction.lrdChangeModalVisible,
        changeModalLoading: loanRecordAction.lrdChangeModalLoading
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(LoanRecord);